iT邦幫忙

2021 iThome 鐵人賽

DAY 18
1

好的~今天先來檢查一下

目前的成品跟一開始規畫的UI,完成度如何呢?

比對UI完成度

這是一開始的首頁UI

https://ithelp.ithome.com.tw/upload/images/20211003/20140745stBITWbkKb.png

這是目前的成品

https://ithelp.ithome.com.tw/upload/images/20211003/20140745n3DDXuQqlc.png

恩.... 有點後悔前幾天沒先看UI稿就亂做了 可惡 XDDD

昨天有說過,我習慣的開發流程就是"達成指定目標>重構>前進下一個目標>達成指定目標"

那目前就是進入 重構/調整 階段啦,重構完成後,就可以去下一個階段了!

目前還差甚麼?

  1. 在輪播旁邊,要加上主題推薦和節慶活動的圖片,點下後要可以連到對應頁面
  2. 下方的熱門活動排行要美化一下

新增圖片到專案

那現在就先新增圖片瞜

為了避免版權問題,我這邊有自己準備了2張圖 XD

(有需要可自由取用)

https://ithelp.ithome.com.tw/upload/images/20211003/20140745V2EaZX1hvI.png

https://ithelp.ithome.com.tw/upload/images/20211003/201407456sIlCDBnik.png

新增到Git

首先把圖丟到 /src/assets 資料夾裡,因為我們有連動Git,

他會詢問要不要加到Git的版本控制內,選擇 "Add"即可

https://ithelp.ithome.com.tw/upload/images/20211003/20140745nbaJwKLTSr.png

Git 檔案顏色區別

這次新增的檔案,檔案名稱會是綠色

沒有加入版控,檔案名稱會是紅色

已經在版本控制下,檔案名稱會是白色

這次檔案有修改,檔案名稱會是藍色


把圖片加到首頁

因為要放在本來的輪播右邊,所以需要先用 v-col,把框架分成左右二格,比率為 8:4

  • 加入圖片

    這次採用 Vuetify的 v-img組件

    不用原生的 寫法是因為如果要做到RWD的效果,要多寫很多東西,

    但是套用v-img組件的話,他預設就會有RWD了,超讚~

  • 設定連結

    這邊採用 :src 加上 require("路徑") 的方式,

    因為我有使用webpack打包,如果直接寫 src = '../assets/festival.png' 的話,會抓不到圖片

    在網路上有其他人遇到相似問題

    Vue Vuetify 的 v-img 组件中的 src 属性不能直接使用相对路径

    有兩種方法,一個是手動加上require,另一個是用vue-loader套件

    因為我目前應該只會套用這2張自己的圖片,所以就手動設定就好了

  • 跳轉頁面

    用router-link 把圖片包起來,to可以指定要連結的頁面

HomePage.vue

	<v-col sm="8"> <!-- 分配8格給照片輪播 -->
    <v-carousel
      cycle
      height="400"
      hide-delimiter-background
      show-arrows-on-hover
    >
      <v-carousel-item
        v-for="(item,i) in carouselItems"
        :key="i"
        :src="item.src"
        :href="item.link"
        target="_blank"
      ></v-carousel-item>
    </v-carousel>
  </v-col>
	<v-col sm="4"><!-- 分配4格給 v-img -->
	    <router-link to="festival"> <!-- 指定點擊後要跳轉的頁面 -->
				<!-- 加入圖片 -->
	      <v-img  
	        :src="require('../assets/festival.png')"
	        max-width="350"
	      ></v-img>
	    </router-link>
	    <router-link to="topic">
	      <v-img
	        :src="require('../assets/topic.png')"
	        max-width="350"
	      ></v-img>
	    </router-link>
	</v-col>

目前成果

圖片看起來有點搞笑,大家不要太在意 XD

18-4

https://ithelp.ithome.com.tw/upload/images/20211003/20140745Sgn3O5tp3z.png


今天因為研究那個圖片連結花比較長時間><

下半部的美化我們明天繼續~


上一篇
[Day 17] 實作-熱門活動排行 List
下一篇
[Day 19] 實作-美化首頁 上傳Git
系列文
前端?後端?你早晚都要全端的,何不從現在開始?31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
juck30808
iT邦研究生 1 級 ‧ 2021-10-03 20:04:09

主題推薦(讚

1
Tilda
iT邦新手 4 級 ‧ 2021-10-04 09:59:03

圖片阿毛畫的吧,別騙ㄌ

Siqing47 iT邦新手 5 級 ‧ 2021-10-04 19:14:08 檢舉

阿毛哪有我畫的好

我要留言

立即登入留言